<template>
    <div class="demo-date-picker">
        <div class="container-left">
            <div class="block-top">
                <h3 class="cll_h3">编辑商品</h3>
            </div>
            <div class="block">
                <h1>商品信息</h1>
            </div>
        </div>

        <div class="container-right">
            <div class="block-top">

            </div>
            <div class="block">
                <el-form :model="form" label-width="120px" style="max-width: 460px">

                    <el-form-item label="展示类别:">
                        <el-select v-model="form.name" placeholder="男士餐">
                            <el-option label="男士餐" value="1" />
                            <el-option label="女士餐" value="2" />
                            <el-option label="工作餐" value="3" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="价格:" width="400px">
                        <el-input v-model="form.singlePrice" />
                    </el-form-item>

                    <el-form-item label="海报:" width="400px">
                        <el-upload class="avatar-uploader" action="mock/image" :show-file-list="false"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="最多订餐人数:" width="400px">
                        <el-input v-model="form.price1" />
                    </el-form-item>
                    <el-form-item label="1人价格" width="400px">
                        <el-input v-model="form.price1" />
                    </el-form-item>

                    <el-form-item label="3-5人价格" width="400px">
                        <el-input v-model="form.price2" />
                    </el-form-item>
                    <el-form-item label="5-10人价格" width="400px">
                        <el-input v-model="form.price3" />
                    </el-form-item>
                </el-form>



            </div>
        </div>
    </div>
    <div class="demo-date-picker">
        <div class="container-left">
            <div class="block-top">

            </div>
            <div class="block">
                详情
            </div>
        </div>

        <div class="container-right">
            <div class="block-top">

            </div>
            <div class="block">
                <el-form width="400">
                    <el-form-item label="商品简介:">
                        <el-input v-model="form.desc" type="textarea" placeholder="请输入商品描述" />
                    </el-form-item>

                    <el-form-item label="商品编辑:">
                        <template #default="scope">
                            <div ref="editorRef"></div>
                        </template>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
    <div class="demo-date-picker">
        <div class="container-left">
            <div class="block-top">

            </div>
            <div class="block">

            </div>
        </div>

        <div class="container-right">
            <div class="block-top">

            </div>
            <div class="block">
                <el-form :inline="true">
                    <el-form-item>
                        <button @click.stop.prevent="reset">重置</button>
                    </el-form-item>
                    <el-form-item>
                        <button @click.stop.prevent="save">保存</button>
                    </el-form-item>
                    <el-form-item>
                        <button @click.stop.prevent="cancel">取消</button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

</template>

<script>
import Editor from 'wangeditor'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { defineComponent } from 'vue'
import { imageapi } from '@/api/cuisine'
export default defineComponent({
    name: '',
    data() {
        return {
            form: {
                region: '',
                price: '',
                number: '',
                price1: '',
                price2: '',
                price3: '',
                desc: '',
                context: '',
            },
            imageUrl: '',
            editor: null,

        }
    },
    components: {
        Plus
    },
    created() {
        if(this.$route.query.brief){
            this.getdata()
        }
       
     },
       
    mounted() {
        // 创建实例
        this.editor = new Editor(this.$refs.editorRef)
        this.editor.config.zIndex = 0
        this.editor.create()
    },
    methods: {
        async getdata() {
            // console.log(this.$route.query)
            this.form = this.$route.query
            const res = await imageapi()
            // console.log(res.list[0].bill)
            this.imageUrl = res.list[0].bill
        },

        handleAvatarSuccess(response, uploadFile) {
            console.log('response:', response)
            this.user.avatarUrl = response.data.file
            this.imageUrl = URL.createObjectURL(uploadFile.raw)
        },
        beforeAvatarUpload(rawFile) {
            if (rawFile.type !== 'image/jpeg') { // 格式
                ElMessage.error('只能上传jpg格式的图片!')
                return false
            }
            if (rawFile.size / 1024 / 1024 > 2) { // 大小
                ElMessage.error('文件大小不能超过2MB!')
                return false
            }
            return true
        },
        reset() {
            this.form.region = ''
            this.form.price = ''
            this.form.number = ''
            this.form.price1 = ''
            this.form.price2 = ''
            this.form.price3 = ''
            this.form.desc = ''
            this.form.context = this.editor.txt.clear()


        },
        //保存编辑
        save() {

        },
        cancel() {
            this.$router.back('/cuisine')
        },


    },
    components: {
        Plus,
    },
})
</script>

<style scoped>
body,
html {
    width: 100%;
}

.demo-date-picker {
    width: 100%;
    padding: 0;
    display: flex;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    flex: 1;
}

.demo-date-picker .block-top {
    padding: 30px 0;
    text-align: center;
    flex: 1;
    height: 10px;
    border-bottom: solid 1px black;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .container-left {
    border-right: solid 1px black;
    width: 130px;
}

.demo-date-picker .container-right {
    width: 100%;
}

.demo-date-picker .container-right .block {
    border-right: none;
    width: calc(100%-100px);
}

.demo-date-picker .container-right .block-top {
    border-right: none;
    width: calc(100%-100px);
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

el-form-item {
    margin-left: 100px;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

button {
    width: 70px;
    height: 30px;
    background-color: #999;
    color: #fff;
    border: none
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>